<template>
	<div>
		<div class="tittle">周末去哪儿</div>
		<!-- 推荐区域内容 -->
		<ul>
			<!-- border-bottom是之前引入的1像素解决方案的一个库文件的样式 -->
			<li class="item border-bottom" v-for="item of list" :key='item.id'>
				<div class="item-img-wrapper">
					<img class="item-img" :src="item.imgUrl" alt="" />
				</div>
				<div class="item-info">
					<p class="item-tittle">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'HomeWeekend',
		props: {
			list: Array
		}
	}
</script>

<style lang="less" scoped="scoped">
	@import '~styles/mixins.less';
	.tittle {
		line-height: 0.8rem;
		background: #eee;
		text-indent: 0.2rem;
	}
	.item-img-wrapper {
		overflow: hidden;
		height: 0;
		padding-bottom: 37.09%;
	}
	/* 设置图片样式 */
	.item-img {
		width: 100%;
	}
	.item-info {
		padding: 0.1rem;
		/* 内容标题 */
		.item-tittle {
			line-height: 0.54rem;
			font-size: 0.32rem;
			/* 实现省略显示文字样式 */
			.ellipsis;
		}
		/* 内容描述 */
		.item-desc {
			line-height: 0.4rem;
			color: #ccc;
			/* 实现省略显示文字样式 */
			.ellipsis;
		}
	}
</style>
